<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <div style="width: 300px">
            <el-form :model="medical"  label-width="100px"  class="demo-ruleForm">

            <el-form-item label="身份证号码" prop="name">
                <el-input v-model="medical.patientIdCard" @blur="move"></el-input>
            </el-form-item>
                <el-form-item label="姓名"  prop="name">
                    <el-input v-model="medical.patientName"></el-input>
                </el-form-item>
                <el-form-item label="年龄"  prop="name">
                    <el-input v-model="medical.patientAge"></el-input>
                </el-form-item>
                <el-form-item label="性别"  prop="name">
                    <el-input v-model="medical.patientSex"></el-input>
                </el-form-item>
                <el-form-item label="电话号"  prop="name">
                    <el-input v-model="medical.patientPhoneNumber"></el-input>
                </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">办卡</el-button>
                <el-button @click="reset">完善信息</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
    <script src="/js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                medical:{
                    patientName:'',
                    card:'',
                    patientSex:'',
                    patientAge:'',
                    patientPhoneNumber:'',
                    patientId:''
                }
            },
            methods:{
                submit:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("patientId",vm.medical.patientId);
                    axios.post('/medical/medical-card/insertCard',formData).then(
                        function (resp) {
                            alert("办卡成功");
                        }
                    )
                },
                reset:function(){

                },
                move:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("card",vm.medical.patientIdCard);

                    axios.post('/medical/medical-card/selectMessage',formData).then(
                        function (resp) {
                            console.log(resp);
                            if(resp.data.success){
                                vm.medical=resp.data.data;
                            }else{
                                alert(resp.data.message);
                            }

                        }
                    )
                }

            }
        });
    </script>
</body>
</html>